<template>
  <div class="paramsBox">
    <div class="header">
      <div>
        <span>当前组件</span>
      </div>
      <div v-if="currentView">{{ currentView.name }} {{ currentView.key }}</div>
      <Button type="error" @click="delView">删除该组件</Button>
    </div>
    <div v-if="currentView">
      <template v-if="slot">
        <div class="paramItem">
          <div>修改文字</div>
          <Input v-model="slot.text" placeholder="修改文字" @on-change="setView" />
        </div>
      </template>
      <template v-if="props">
        <template v-for="(v, k) in props">
          <!-- string类型，输入框 -->
          <div class="paramItem" v-if="v.type === 'string' && v.current !== false">
            <div>{{ v.zh }}</div>
            <Input
              type="textarea"
              v-model="props[k].current"
              :placeholder="`${v.zh}`"
              @on-change="setView"
            />
          </div>
          <!-- boolean类型，开关 -->
          <div class="paramItem" v-if="v.type === 'boolean'">
            <div>{{ v.zh }}</div>
            <i-switch v-model="props[k].current" @on-change="setView" />
          </div>
          <!-- array类型，选择器 -->
          <div class="paramItem" v-if="v.type === 'array' && v.current !== false">
            <div>{{ v.zh }}</div>
            <Select v-model="props[k].current" @on-change="setView">
              <Option v-for="item in v.options" :value="item">{{ item }}</Option>
            </Select>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import UnitViewHandle from "@/plugins/UnitViewHandle";

export default {
  computed: {
    ...mapState(["pages", "currentView"]),
    slot() {
      return this.currentView.slot;
    },
    props() {
      return this.currentView.props;
    }
  },
  methods: {
    ...mapMutations(['updateView', 'deleteView']),
    setView() {
      this.updateView(this.currentView);
    },
    delView() {
      this.deleteView(this.currentView.key);
    }
  }
};
</script>

<style>
.paramsBox {
  max-height: 90%;
  overflow-y: scroll;
  padding: 0 10px;
}

.header {
  padding: 30px 0;
}

.paramItem {
  padding: 10px 0;
  border-top: 1px solid #eee;
}
</style>